<!-- 新建模型训练 -->
<template>
	<div>
		<el-form :model="editForm" ref="editForm" :rules="rules" >
			<el-form-item label="模型训练名称" prop="training_name">
				<el-input v-model="editForm.training_name" clearable placeholder="请输入模型训练名称" size="small"></el-input>
			</el-form-item>
			<el-form-item label="所属模型" prop="model_id">
				<el-select v-model="editForm.model_id" clearable placeholder="请选择模型名称" style="width: 100%;" >
				    <el-option  v-for="item in modelList" :key="item.model_id" :label="item.model_name" :value="item.model_id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="训练参数" prop="resultInfo">
				<vue-json-editor
				      v-model="resultInfo"
				      :showBtns="false"
				      :mode="'code'"
				      lang="zh" 
				      @json-change="onJsonChange"
				      @json-save="onJsonSave" 
				      @has-error="onError" 
				    />
			</el-form-item>
			<el-form-item label="备注" prop="comment">
				<el-input v-model="editForm.comment" clearable placeholder="请输入备注" size="small"></el-input>
			</el-form-item>
		</el-form>
		<div class="dialog-footer">
			<el-button @click="closedialog">取 消</el-button>
			<el-button type="primary" @click="saveEdit">开始训练</el-button>
		</div>
	</div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import {modelListAPI,addModelTrainAPI,} from '@/api/index';
export default {
	components: { vueJsonEditor },
	name: 'editModel',
	props: {
		Infoitem: Object
	},
	data() {
	    return {
			title:'',
			editForm:{},
			rules: {
				training_name: [{ required: true, message: '请输入模型训练名称', trigger: 'blur' }],
				model_id: [{ required: true, message: '请选择模型名称', trigger: 'blur' }],
			},
			modelList:[],
			resultInfo: {
				'timeframe':'1H',
				'indicator':[ 
					'MA10' 
				],   
				'start_date':'2022-02-11 06:00:00',
				'end_date':'2022-02-16 06:00:00',
			}
	    };
	},
	mounted() {
		if(JSON.stringify(this.Infoitem) !== '{}'){
			this.editForm = this.Infoitem
		}
		this.getData()
	},
	methods:{
		getData(){
			this.loading = true;
			var parems  = {
				pageNum: 1,
				pageSize: 10000
			}
			modelListAPI(parems).then(res => {
				if (res.status == 200) {
					this.modelList = res.data;
				}
			});
		},
		onJsonChange (value) {
			// console.log('更改value:', value);
			// 实时保存
			this.onJsonSave(value)
		},
		onJsonSave (value) {
			// console.log('保存value:', value);
			this.resultInfo = value
		},
		onError(value) {
			// console.log("json错误了value:", value);
		},
		saveEdit(){
			var that = this
			that.$refs.editForm.validate(valid => {
			    if (valid) {
					var parems = {
						training_name:that.editForm.training_name,
						input:that.resultInfo,
						model_id:that.editForm.model_id,
						comment:that.editForm.comment,
					}
					addModelTrainAPI(parems).then(res => {
						if(res.status == 200){
							that.$message.success(`添加成功`);
							that.closedialog();
						}else{
							that.$message.error(res.msg);
						}
					});
			    } else {
			        console.log('error submit!!');
			        return false;
			    }
			});
		},
		closedialog() {
			this.$emit('closeDialog', false);
		}
	}
};
</script>

<style scoped>
.dialog-footer {
	width: 100%;
	text-align: right;
}
/deep/.el-col-12{
	padding: 0 15px;
}
/deep/.el-form-item{
	display: flex;
	flex-direction: column;
}
/deep/.el-form-item__label{
	text-align: left !important;
}
</style>
